<template>
  <div class="swiper-box">
    <div class="background"></div>
    <!-- <div class="swiper">
        <ul class="list" ref="list">
            <li class="list-item" v-for="(item,index) in list" :key="index">
                <img :src="item" alt="">
            </li>
        </ul>
    </div> -->
    <div class="swiper swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in list" :key="index">
            <img :src="item" alt="">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import img1 from "../img/1.jpg";
import img2 from "../img/2.jpg";
import img3 from "../img/3.jpg";
import img4 from "../img/4.jpg";

export default {
  data() {
    return {
      list: [img1, img2, img3, img4],
      num: 0,
    };
  },
  methods: {},
  mounted() {
     var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 0,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
  },
};
</script>

<style scoped>
.swiper-box {
  display: flex;
  justify-content: center;
  height: 150px;
}
.background {
  height: 100px;
  width: 100%;
  background-color: #f53f3f;
  border-radius: 0 0 11% 11%;
  position: absolute;
}
.swiper {
  height: 150px;
  width: 90%;
  position: absolute;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
/* .list {
  height: 100%;
  width: 100%;
  display: flex;
}
.list-item {
  height: 100%;
  width: 100%;
  list-style: none;
  flex-shrink: 0;
  border-radius: 10px;
}
.list-item img {
  height: 100%;
  width: 100%;
  border-radius: 10px;
} */
.swiper-slide {
  text-align: center;
  font-size: 18px;
  border-radius: 10px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
</style>